ユーザーの登録状態に応じて LINE 公式アカウントのリッチメニューを切り替える【実装編】
今回は以前投稿されたユーザーの登録状態に応じて LINE 公式アカウントのリッチメニューを切り替えるの具体的な実装方法を紹介したいと思います。
最終的なイメージはこちら。
ややわかりにくい部分はありますが、会員登録の前後でLINEのトーク画面のメニューが切り替わっていることが確認できると思います。なぜこのようなことをする必要があるのか？という部分については上記のブログを参考にしてください。今回実装したコードはこちらになります。
進め方
以下のような手順で進めていきます。
- LINE Developer より LINE ログイン/LIFF アプリを登録
- LINE Developer より Messaging API を登録
- Amplify Console で LIFF アプリをデプロイ
- サーバーサイドのコードを修正
- LIFF アプリのエンドポイントを変更
- リッチメニューを登録
- 環境変数を設定しサーバーサイドをデプロイ
- 環境変数を設定し LIFF アプリを再デプロイ
React と CDK で LIFF アプリを作ってみようをベースに必要なところを追加で実装します。
本ブログの構成イメージ
やってみた
それでは早速やっていきましょう。
LINE Developer より LINE ログイン/LIFF アプリを登録
LINE ログイン/LIFF アプリの登録を参考に LIFF アプリを登録します。エンドポイント URL は後ほど変更するため、一旦任意の URL を登録しておきます。
LINE Developer より Messaging API を登録
Messaging API とは、LINE のプッシュ通知や応答メッセージなど LINE 公式アカウントとユーザーを繋ぐ機能を提供しています。LINE ログインと同様、LINE Dveloper にて登録します。チャネル名、チャネル説明等は任意の名前を入力します。作成が完了すると MessagingAPI 設定よりチャネルアクセストークン（長期）が発行できるようになるため、その値を取得します。
Amplify Console で LIFF アプリをデプロイ
上記ブログのコードに対し、入力フォームの実装、Amplify Console の設定ファイルを追加し GitHub にプッシュします。その後、Amplify Console を利用し SPA をホスティングします。
Amplify Console とは静的 Web サイトをホスティングするためのサービスです。スマホからリッチメニューを確認するためにこのサービスを利用します。Amplify Console の詳しい説明については以下をご確認ください。
マネジメントコンソール上での操作は以下を参考に実施してください。
サーバーサイドのコードを修正
LIFF のサーバーサイドでは、LambdaAuthorizer によって LINE の UserID（LINE 公式アカウントのプロバイダーで一意になる値）を取得しています。リッチメニューを変更する際にはこの UserID と MessagingAPI のチャネルアクセストークン、変更後のリッチメニュー ID を利用します。コードを以下のように変更します。
export const handler = async (event: LambdaEvent): Promise<APIGatewayProxyResult> => {
console.log('event: ', JSON.stringify(event, null, 2))
const lineUserId = event.requestContext.authorizer.lineUserId
// メインのユーザー登録処理などを実施
const richMenu = process.env.AFTER_REGISTRATION_RICH_MENU_ID
const channelAccessToken = process.env.CHANNEL_ACCESS_TOKEN
try {
await fetch(`https://api.line.me/v2/bot/user/${lineUserId}/richmenu/${richMenu}`, {
method: 'POST',
body: '{}',
headers: {
Authorization: `Bearer ${channelAccessToken}`,
'Content-Type': 'application/json',
},
})
} catch (err) {
console.log(err.toString())
}
return {
statusCode: 200,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': '*',
},
body: JSON.stringify({}),
}
}
MessagingAPI のチャネルアクセストークン、変更後のリッチメニュー ID は環境変数にて設定します。
LIFF アプリのエンドポイントを変更
LIFF アプリのエンドポイント URL を AmplifyConsole がホスティングする URL に変更します。
リッチメニューを登録
公式ドキュメントを参照し会員登録前のリッチメニュー（会員登録で100ポイント獲得！）、会員登録後のリッチメニュー（会員情報の確認）を登録します。
実行する API は以下の 3 つです。
postman で実行したAPIをエクスポートしたファイルはこちらになりますので参考にしてください。
環境変数を設定しサーバーサイドをデプロイ
登録後のリッチメニュー ID と MassagingAPI のチャネルアクセストークンを環境変数 AFTER_REGISTRATION_RICH_MENU_ID 、CHANNEL_ACCESS_TOKEN に設定しサーバーサイドのアプリケーションをデプロイします。
yarn backend:build yarn backend:deploy
環境変数を設定し LIFF アプリを再デプロイ
公式ドキュメントを参考に、Amplify Console の環境変数に REACT_APP_LIFF_ID と REACT_APP_API_URL を設定します。REACT_APP_API_URL には先ほどデプロイしたサーバーサイドのアプリケーションの URL を指定します。何かしらリポジトリ内のコードを修正し AmplifyConsole を再実行します。
デプロイ完了後、LINE Developer の Messaging API より QR コードを読み取り友達になると、冒頭で紹介したアプリが利用できます。
おわりに
以上、 MessagingAPI を利用したリッチメニュー変更の Tips でした！
